import Vue from 'vue'
import VueRouter from 'vue-router'
// 1.引入四个页面对应的组件
import Home from '../views/home/index.vue'
import Category from '../views/category/index.vue'
import Cart from '../views/cart/index.vue'
import User from '../views/user/index.vue'
import Register from '../views/register/index.vue'
import Login from '../views/login/index.vue'

import Footer from '../components/Footer'

Vue.use(VueRouter)

// 2.配置页面对应的路由规则
const routes = [
  {
    path: '/',
    redirect: '/home' // 如果需要输入域名，去登录页面，输入  /login
  },
  {
    path: '/home',
    name: 'home',
    // component: Home
    components: {
      default: Home,
      footer: Footer
    }
  },
  {
    path: '/category',
    name: 'category',
    // component: Category
    components: {
      default: Category,
      footer: Footer
    }
  },
  {
    path: '/cart',
    name: 'cart',
    // component: Cart
    components: {
      default: Cart,
      footer: Footer
    }
  },
  {
    path: '/user',
    name: 'user',
    // component: User
    components: {
      default: User,
      footer: Footer
    }
  },
  {
    path: '/register',
    name: 'register',
    component: Register
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
